/**
 * 二元运算表格类
 * by littlefean
 */
class BinaryOperationTable {
    constructor(opStr, len, bindEle, title = "", lenPx = 20) {
        this.opStr = opStr;
        this.len = len;
        this.bindEle = bindEle;
        this.title = title;
        this.lenPx = lenPx;
    }

    /**
     * 添加html元素
     *
     */
    init() {
        let w = this.len + 1;
        let h = this.len + 1;

        let andTableEle = this.bindEle;
        andTableEle.appendChild(div(this.title, "tableTitle"));

        for (let y = 0; y < h; y++) {
            let lineEle = div("", "line");
            lineEle.style.height = `${this.lenPx}px`;
            lineEle.style.width = `${this.lenPx * w}px`;

            for (let x = 0; x < w; x++) {
                let boxEle = div("", "box");
                boxEle.style.width = `${this.lenPx}px`;
                boxEle.style.height = `${this.lenPx}px`;
                boxEle.style.lineHeight = `${this.lenPx}px`;

                if (y === 0 || x === 0) {
                    // 当前是第一行或者第一列
                    boxEle.classList.add("titleBox");
                    if (x === 0 && y === 0) {
                        boxEle.innerHTML = this.opStr;
                    } else {
                        if (x === 0) {
                            boxEle.innerHTML = `${y - 1}`;
                        } else {
                            boxEle.innerHTML = `${x - 1}`;
                        }
                    }
                } else {
                    // 当前是需要填入计算结果的小盒子
                    let res = eval(`(x - 1)
                    ${this.opStr}(y - 1)`);
                    boxEle.innerText = `${res}`;
                    boxEle.style.color = `rgba(${1 + res * 50}, 200, 200)`;

                    let gray = 50 - res * 2;
                    boxEle.style.backgroundColor = `rgba(${gray}, ${gray}, ${gray})`;
                }
                if (y > x && x !== 0) {
                    boxEle.classList.add("delBox");
                }

                lineEle.appendChild(boxEle);
            }
            andTableEle.appendChild(lineEle);
        }
    }
}
